<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/head::head('角色 - 广告机管理后台')"></head>
<!--/* <editor-fold desc="define"> */-->
<!--/*@thymesVar id="adminPath" type="java.lang.String"*/-->
<!--/*@thymesVar id="adminRoleID" type="java.lang.Integer"*/-->
<!--/*@thymesVar id="loginUser" type="com.xmlan.machine.module.user.entity.User"*/-->
<!--/*@thymesVar id="page" type="com.github.pagehelper.PageInfo<com.xmlan.machine.module.role.entity.Role>"*/-->
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<!--/*@thymesVar id="userCount" type="java.util.List<com.xmlan.machine.module.role.entity.RoleCount>"*/-->
<!--/*@thymesVar id="deleteToken" type="java.lang.String"*/-->
<!--/* </editor-fold> */-->

<body>
<th:block th:include="/common/header::header('role')"/>

<main style="z-index: 0;">
  <div class="page-title z-depth-1 blue-grey darken-2">
    <div class="white-text">
      <span class="flow-text">
        <a class="btn-flat"><i class="material-icons white-text">list</i></a>角色列表
      </span>
    </div>
  </div>
  <br/>
  <div id="main-content" class="container">
    <div id="search-box">
      <form th:action="@{${adminPath}+'/role/list/1'}" method="post">
        <ul class="collapsible popout" data-collapsible="accordion">
          <li>
            <div class="collapsible-header"><i class="material-icons">search</i>条件搜索</div>
            <div class="collapsible-body">
              <div class="row">
                <div class="col s12 m10 l10 center">
                  <div class="input-field">
                    <input id="name" name="name" type="text" placeholder="输入角色名称" th:value="${name}"/>
                    <label for="name">按角色名称</label>
                  </div>
                </div>
                <div class="col s12 m2 l2 center">
                  <div class="input-field">
                    <button type="submit" class="btn-floating btn-large waves-effect waves-light green">
                      <i class="material-icons">search</i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </form>
    </div>

    <table class="highlight responsive-table">
      <thead>
      <tr>
        <!--<th>开发者</th>-->
        <th>角色名</th>
        <th>用户数</th>
        <th>备注</th>
      </tr>
      </thead>
      <tbody class="card">
      <tr th:each="item:${page.list}">
        <td th:text="*{item.name}"></td>
        <th:block th:each="count:${userCount}">
          <td th:if="${item.id==count.id}" th:text="${count.count}"></td>
        </th:block>
        <td th:text="*{#strings.abbreviate(item.remark,50)}"></td>
        <td class="right-align hide-on-med-and-down">
          <div class="fixed-action-btn horizontal" style="position: relative; right: 0; top: 0;">
            <a class="btn-floating btn-large blue"><i class="material-icons">menu</i></a>
            <ul>
              <li>
                <a class="btn-floating blue waves-effect waves-light tooltipped btn modal-trigger" data-position="top"
                   data-delay="50" data-tooltip="查看详情" href="#detail-modal"
                   th:onmouseover="'javascript:detail(\''+*{item.id}+'\')'">
                  <i class="material-icons">more_horiz</i>
                </a>
              </li>
              <li>
                <a class="btn-floating green waves-effect waves-light tooltipped" data-position="top" data-delay="50"
                   data-tooltip="编辑" th:href="@{${adminPath}+'/role/form?id='+${item.id}}">
                  <i class="material-icons">edit</i>
                </a>
              </li>
              <li>
                <a class="btn-floating red darken-1 waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="删除" href="#delete-modal"
                   th:onclick="'javascript:prepareForDeleting(\''+${item.id}+'\')'" th:if="${item.id!=adminRoleID}">
                  <i class="material-icons">delete</i>
                </a>
              </li>
            </ul>
          </div>
        </td>
        <td class="hide-on-large-only" id="mobile-table-item-buttons">
          <div class="fixed-action-btn click-to-toggle center-align" style="position: relative; left: 0; top: 0;">
            <a class="btn-floating blue"><i class="material-icons">menu</i></a>
            <ul>
              <li>
                <a class="btn-floating blue waves-effect waves-light tooltipped btn modal-trigger" data-position="top"
                   data-delay="50" data-tooltip="查看详情" href="#detail-modal"
                   th:onclick="'javascript:detail(\''+*{item.id}+'\')'">
                  <i class="material-icons">more_horiz</i>
                </a>
              </li>
              <li>
                <a class="btn-floating green waves-effect waves-light tooltipped" data-position="top" data-delay="50"
                   data-tooltip="编辑" th:href="@{${adminPath}+'/role/form?id='+${item.id}}">
                  <i class="material-icons">edit</i>
                </a>
              </li>
              <li>
                <a class="btn-floating red darken-1 waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="删除" href="#delete-modal"
                   th:onclick="'javascript:prepareForDeleting(\''+${item.id}+'\')'" th:if="${item.id!=adminRoleID}">
                  <i class="material-icons">delete</i>
                </a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      </tbody>
    </table>

    <div id="fixed-add-btn" class="fixed-action-btn" th:if="${loginUser.roleID!=1}">
      <a th:if="${loginUser.roleID!=1}" class="btn-floating btn-large waves-effect waves-light blue" th:href="@{${adminPath}+'/role/form'}">
        <i class="large material-icons">add</i>
      </a>
    </div>

    <div class="center">
      <ul class="pagination">
        <li th:if="${!page.hasPreviousPage}" class="disabled">
          <a href="#"><i class="material-icons">chevron_left</i></a>
        </li>
        <li th:if="${page.hasPreviousPage}" class="waves-effect">
          <a th:href="@{${adminPath}+'/role/list/'+${page.prePage}+'?name='+${name}}">
            <i class="material-icons">chevron_left</i>
          </a>
        </li>

        <th:block th:each="number:${page.navigatepageNums}">
          <li th:if="${number==page.pageNum}" class="waves-effect" id="active-page">
            <a href="#" th:text="${number}"></a>
          </li>
          <li th:if="${number!=page.pageNum}" class="waves-effect">
            <a th:href="@{${adminPath}+'/role/list/'+${number}+'?name='+${name}}" th:text="${number}"></a>
          </li>
        </th:block>

        <li th:if="${!page.hasNextPage}" class="disabled">
          <a href="#"><i class="material-icons">chevron_right</i></a>
        </li>
        <li th:if="${page.hasNextPage}" class="waves-effect">
          <a th:href="@{${adminPath}+'/role/list/'+${page.nextPage}+'?name='+${name}}">
            <i class="material-icons">chevron_right</i>
          </a>
        </li>
      </ul>
    </div>
    <!--/* </editor-fold> */-->
  </div>

  <!-- <editor-fold desc="Modal"> -->
  <div id="detail-modal" class="modal">
    <div class="modal-content">
      <h4>详情</h4>
      <h6 class="green-text text-darken-2">角色编号</h6>
      <p id="detail-item-id">id</p>
      <h6 class="green-text text-darken-2">角色名</h6>
      <p id="detail-item-name">name</p>
      <h6 class="green-text text-darken-2">备注</h6>
      <p id="detail-item-remark">remark</p>
    </div>
    <div class="modal-footer">
      <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">关闭</a>
    </div>
  </div>

  <div id="delete-modal" class="modal">
    <form th:action="@{${adminPath}+'/role/delete'}">
      <div class="modal-content">
        <h4>注意！</h4>
        <input id="delete-confirm-id" name="id" type="hidden"/>
        <input name="deleteToken" type="hidden" th:value="${deleteToken}">
        <p>是否要删除角色 <span id="delete-name"></span> ?</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">不是</a>
        <button type="submit" class="modal-action modal-close waves-effect btn-flat">是</button>
      </div>
    </form>
  </div>
  <!-- </editor-fold> -->
</main>

<th:block th:include="/common/footer::footer"/>
<th:block th:include="/common/script::script"/>
<script type="text/javascript">
  $(function () {
    resize_footer(window.screen.width);
    $('#button-nav-menu').sideNav({
      closeOnClick: true,
      draggable: true
    });
    $('.dropdown-button').dropdown();
    $('.date-picker').pickadatee({
      closeOnSelect: true
    });
    $("#detail-modal").modal();
    $("#delete-modal").modal();
    $("#roleID").material_select();
    toast('[[${message}]]');
  });

  function detail(id) {
    var url = '[[${adminPath}]]/role/detail/' + id;
    $.ajax({
      url: url,
      type: "GET",
      success: function (data) {
        $("#detail-item-id").text(data.id);
        $("#detail-item-name").text(data.name);
        $("#detail-item-remark").text(data.remark);
      },
      error: function () {
      }
    });
  }

  function prepareForDeleting(id) {
    $("#delete-confirm-id").val(id);
    $.ajax({
      url: '[[${adminPath}]]/role/detail/' + id,
      type: "GET",
      success: function (data) {
        $("#delete-name").text(data['ad'].name);
        setTimeout(function () {
          location.reload()
        }, 3000);
      }
    })
  }
</script>
</body>
</html>
